<style>
    #delivery_table th {
        border-top-width: 3px;
        border-right-width: 3px;
        border-left-width: 3px;
        border-top-color: #acacac;
        border-right-color: #acacac;
        border-left-color: #acacac;
    }
    #delivery_table .bottomboder {
        border-bottom-width: 3px;
        border-bottom-color: #acacac;
    }
    #delivery_table .rightboder {
        border-right-width: 3px;
        border-right-color: #acacac;
    }
    #delivery_table .leftboder {
        border-left-width: 3px;
        border-left-color: #acacac;
    }
</style>
<!--入仓出货订单数据表格 参考地址： https://blog.csdn.net/xiongzhengxiang/article/details/6754053 -->
<table class="layui-table mt30" id="delivery_table" style=" table-layout:fixed; width:100%;">
    <col style="width: 5%" />
    <thead>
    <tr class="layui-bg-white">
        <th width="10%" colspan="2">
            <a href="javascript:showDetail('今日下单件数-订单列表', '{:url('getDeliverTableDetail', 'types=order_today&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                今日下单件数
            </a></th>
        <th width="10%" colspan="2">
            <a href="javascript:showDetail('昨日下单件数-订单列表', '{:url('getDeliverTableDetail', 'types=order_yesterday&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                昨日下单件数
            </a></th>
        <th width="10%" colspan="2">
            <a href="javascript:showDetail('昨日出货金额-订单列表', '{:url('getDeliverTableDetail', 'types=delivery_yesterday&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                昨日出货金额
            </a></th>
        <th width="10%" colspan="2">
            <a href="javascript:showDetail('昨日入仓金额-订单列表', '{:url('getDeliverTableDetail', 'types=levite_yesterday&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                昨日入仓金额
            </a></th>
        <th width="10%" colspan="2">
            <a href="javascript:showDetail('本月出货金额-订单列表', '{:url('getDeliverTableDetail', 'types=delivery_this_month&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                本月出货金额
            </a></th>
        <th width="10%" colspan="2">
            <a href="javascript:showDetail('本月入仓金额-订单列表', '{:url('getDeliverTableDetail', 'types=levite_this_month&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                本月入仓金额
            </a></th>
        <th width="10%" colspan="2">
            <a id="delivery_last_month" onclick="setDateDeliver('delivery_last_month')"><i class="layui-icon layui-icon-date" style="font-size: 19px; color: #1E9FFF;"></i></a>
            <a href="javascript:showDetail('上月出货金额-订单列表', '{:url('getDeliverTableDetail', 'types=delivery_last_month&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
                上月出货金额
            </a></th>
        <th width="10%" colspan="2">
            <a id="levite_last_month" onclick="setDateDeliver('levite_last_month')"><i class="layui-icon layui-icon-date" style="font-size: 19px; color: #1E9FFF;"></i></a>
            <a  href="javascript:showDetail('上月入仓金额-订单列表', '{:url('getDeliverTableDetail', 'types=levite_last_month&factory_id='.$thisFactoryId.'&from='.$thisFrom)}')" style="text-decoration:underline">
            上月入仓金额
            </a>
        </th>
        <th width="7%" colspan="1">年度</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2" id="order_today_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="order_yesterday_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="delivery_yesterday_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="levite_yesterday_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="delivery_this_month_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="levite_this_month_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="delivery_last_month_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="2" id="levite_last_month_txt0" class="rightboder leftboder">FOB=0<br/>加工费=0</td>
        <td colspan="1" rowspan="5" id="year_annual_txt0" class="rightboder leftboder rightboder bottomboder">金额：0<br/>目标：0<br/>完成率：0%</td>
    </tr>
    <tr>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
        <td class="leftboder">件数</td>
        <td class="rightboder">订单数</td>
    </tr>
    <tr>
        <td id="order_today_txt1" class="leftboder">0</td>
        <td id="order_today_txt2" class="rightboder">0</td>
        <td id="order_yesterday_txt1" class="leftboder">0</td>
        <td id="order_yesterday_txt2" class="rightboder">0</td>
        <td id="delivery_yesterday_txt1" class="leftboder">0</td>
        <td id="delivery_yesterday_txt2" class="rightboder">0</td>
        <td id="levite_yesterday_txt1" class="leftboder">0</td>
        <td id="levite_yesterday_txt2" class="rightboder">0</td>
        <td id="delivery_this_month_txt1" class="leftboder">0</td>
        <td id="delivery_this_month_txt2" class="rightboder">0</td>
        <td id="levite_this_month_txt1" class="leftboder">0</td>
        <td id="levite_this_month_txt2" class="rightboder">0</td>
        <td id="delivery_last_month_txt1" class="leftboder">0</td>
        <td id="delivery_last_month_txt2" class="rightboder">0</td>
        <td id="levite_last_month_txt1" class="leftboder">0</td>
        <td id="levite_last_month_txt2" class="rightboder">0</td>
    </tr>
    <tr>
        <td id="order_today_txt3" class="leftboder"></td>
        <td id="order_today_txt4" class="rightboder"></td>
        <td id="order_yesterday_txt3" class="leftboder"></td>
        <td id="order_yesterday_txt4" class="rightboder"></td>
        <td id="delivery_yesterday_txt3" class="leftboder"></td>
        <td id="delivery_yesterday_txt4" class="rightboder"></td>
        <td id="levite_yesterday_txt3" class="leftboder"></td>
        <td id="levite_yesterday_txt4" class="rightboder"></td>
        <td id="delivery_this_month_txt3" class="leftboder"></td>
        <td id="delivery_this_month_txt4" class="rightboder"></td>
        <td id="levite_this_month_txt3" class="leftboder"></td>
        <td id="levite_this_month_txt4" class="rightboder"></td>
        <td id="delivery_last_month_txt3" class="leftboder"></td>
        <td id="delivery_last_month_txt4" class="rightboder"></td>
        <td id="levite_last_month_txt3" class="leftboder"></td>
        <td id="levite_last_month_txt4" class="rightboder"></td>
    </tr>
    <tr>
        <td id="order_today_txt5" class="bottomboder leftboder"></td>
        <td id="order_today_txt6" class="bottomboder rightboder"></td>
        <td id="order_yesterday_txt5" class="bottomboder leftboder"></td>
        <td id="order_yesterday_txt6" class="bottomboder rightboder"></td>
        <td id="delivery_yesterday_txt5" class="bottomboder leftboder"></td>
        <td id="delivery_yesterday_txt6" class="bottomboder rightboder"></td>
        <td id="levite_yesterday_txt5" class="bottomboder leftboder"></td>
        <td id="levite_yesterday_txt6" class="bottomboder rightboder"></td>
        <td id="delivery_this_month_txt5" class="bottomboder leftboder"></td>
        <td id="delivery_this_month_txt6" class="bottomboder rightboder"></td>
        <td id="levite_this_month_txt5" class="bottomboder leftboder"></td>
        <td id="levite_this_month_txt6" class="bottomboder rightboder"></td>
        <td id="delivery_last_month_txt5" class="bottomboder leftboder"></td>
        <td id="delivery_last_month_txt6" class="bottomboder rightboder"></td>
        <td id="levite_last_month_txt5" class="bottomboder leftboder"></td>
        <td id="levite_last_month_txt6" class="bottomboder rightboder"></td>
    </tr>
    </tbody>
</table>
<script id="onclickSendDeliverTpl" type="text/html">
    <div class="layui-inline removeStat" style="margin: 20px 20px;">
        <label class="layui-form-label">下单日期</label>
        <div class="layui-input-inline">
            <input type="text" name="delivery_table_create_date_range" readonly="" id="delivery_table_create_date_range" lay-verify="" placeholder="选择下单日期" class="layui-input">
        </div>
    </div>
<!--    <div class="layui-inline fr" style="margin: 20px 20px;">-->
<!--        <button class="layui-btn layui-btn-normal " >上一个月</button>-->
<!--        <button class="layui-btn layui-btn-normal" >下一个月</button>-->
<!--    </div>-->
    <div class="layui-inline fr" style="margin: 20px 20px;">
        <button class="layui-btn layui-btn-normal save_delivery_table" >确定</button>
        <a href="javascript:layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
    </div>
</script>

<script type="text/javascript">
    var delivery_table_data={type:'',create_date_range:''};
    layui.use([ 'element', 'layer', 'laytpl', 'tool','laydate','table','form','flow'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var laytpl = layui.laytpl,laydate=layui.laydate ,table = layui.table;
        var flow = layui.flow;

        window.setDateDeliver = function(type) {
            delivery_table_data.type=type;
            var content = laytpl($('#onclickSendDeliverTpl').html()).render({data:type,count:33});
            layerDefective = layer.open({
                type: 1
                ,area: ['660px','auto']
                ,offset: '100px'
                ,anim: parseInt(Math.random()*(6+1),10)
                ,skin:'layui-layer-molv'
                ,title:'确认发货单'
                ,content: content
            });
            layui.laydate.render({
                elem: '#delivery_table_create_date_range'
                ,range: '~'
                ,theme: 'molv'
                ,mark: {'{:$today}':''}
                ,change: function(value, date, endDate){
                    $('#delivery_table_create_date_range').val(value);
                    $('#layui-laydate1').remove();//关闭面板
                }
            });
        }

        // 保存基本信息
        $(document).on('click','.save_delivery_table',function(type){
            var create_date_range=$('#delivery_table_create_date_range').val();
            delivery_table_data.create_date_range=create_date_range;
            save_delivery_table(""+delivery_table_data.type+";"+create_date_range);
        });
        save_delivery_table("all");
    });

    //表格数据设置
    function save_delivery_table(types) {
        $.ajax({
            type: "POST",
            url: "{:url('getDeliverTable')}",
            data: "factory_id="+factoryId+"&from="+from+"&types="+types,
            dataType:"json",
            success: function(res){
                if(res.code == 1){
                    $.each( res.data, function(i, n){
                        switch (i) {
                            case 'levite_yesterday':
                            case 'levite_this_month':
                            case 'levite_last_month':
                            case 'delivery_this_month':
                            case 'delivery_yesterday':
                            case 'delivery_last_month':
                            case 'order_yesterday':
                            case 'order_today':
                                $('#'+i+'_txt0').html('FOB='+n.sum_fob_price+'<br/>加工费='+n.sum_cost_price);
                                $('#'+i+'_txt1').html(n.sum_count);
                                $('#'+i+'_txt2').html(n.count_order_id);
                                $('#'+i+'_txt3').html('首单:<br/>'+n.sum_count_is_new+'件');
                                $('#'+i+'_txt4').html('首单:<br/>'+n.count_order_id_is_new+'单');
                                $('#'+i+'_txt5').html('针/梭比(件)<br/>'+n.jian.zhenzhi+'%/'+n.jian.shuozhi+'%');
                                $('#'+i+'_txt6').html('针/梭比(单)<br/>'+n.dan.zhenzhi+'%/'+n.dan.shuozhi+'%');
                                break;
                            case 'year_annual':
                                $('#' + i + '_txt0').html('金额：'+n.sum_fob_price+'<br/>目标：'+n.year_target_money+'<br/>完成率：'+n.finish_unit+'%');
                                break;
                        }
                    });
                }else {
                    layer.msg(res.msg, {icon: 2,anim: 6});
                }
                layui.layer.closeAll();
                if(types!='all'){
                    layui.layer.tips(delivery_table_data.create_date_range, '#'+delivery_table_data.type, {
                        tips: [1, '#3595CC'],
                        time: 40000
                    });
                }
            }
        });
    }

</script>